<template>
  <!--style="background-color: #f0f2f5;"-->
  <div class="index">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <UserCount />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <CustomerCount />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <MaterialCount />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <ProductionOrderCount />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="14">
        <MesCarModelCountChart />
      </el-col>
      <el-col :span="10">
        <FirstApprovalPassedOrderCountChart />
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="14">
        <ShopCarOrderStatusCountChart />
      </el-col>
      <el-col :span="10">
        <MesProductionOrderStatusCountChart />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import UserCount from '@/views/index/main/UserCount.vue';
import MaterialCount from '@/views/index/main/MaterialCount.vue';
import ProductionOrderCount from '@/views/index/main/ProductionOrderCount.vue';
import CustomerCount from '@/views/index/main/CustomerCount.vue';
import MesCarModelCountChart from '@/views/index/main/MesCarModelCountChart.vue';
import MesProductionOrderStatusCountChart from '@/views/index/main/MesProductionOrderStatusCountChart.vue';
import ShopCarOrderStatusCountChart from '@/views/index/main/ShopCarOrderStatusCountChart.vue';
import FirstApprovalPassedOrderCountChart from '@/views/index/main/FirstApprovalPassedOrderCountChart.vue';
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
